<template>
  <!--    评论-->
  <!--    发布评论1-->
  <div style="padding: 2%; margin-top: 20px;" class="shadow"
       :style="'background-color:'+theme.secondaryBackground">
    <div style="
    border: 1px solid #f0f0f0;
padding: 1%">
      <div>
        <input :style="'color:'+theme.numberOneTextColor" v-model="name" placeholder="昵称(必填)"
               class="comment_input"/>
        <input :style="'color:'+theme.numberOneTextColor" v-model="email" placeholder="邮箱(可不留)"
               class="comment_input"/>
      </div>
      <div style="margin-top: 1%;
padding-right: 2%;
padding-left: 2%">
          <textarea
            :style="'color:'+theme.numberOneTextColor"
            placeholder="留下你的评论吧"
            v-model="content_of_the_review"
            class="comment_input_box">
          </textarea>
      </div>
      <div align="right" style="margin-top: 10px">
        <el-button @click="btn_post()">发布</el-button>
      </div>
    </div>
    <!--      用户的评论-->
    <div style="margin-top: 10px">

      <!--        评论的数量-->
      <div class="number_of_reviews" :style="'color:'+theme.numberOneTextColor">
        <span style="font-size: 20px;font-weight: bold"
              :style="'color:'+theme.numberOneTextColor">{{comment_list.length}}</span> 评论
      </div>
      <!--        用户的评论展示-->
      <div style="margin-top: 2%;line-height: 20px" v-for="com in comment_list">
        <el-avatar style="float: left;margin-right: 2%">{{com.name}}</el-avatar>
        <div style="overflow: hidden">
          <div><span class="user_s_nickname">{{com.name}}</span></div>
          <div>
            <span class="time">{{com.date}}</span>
            <span class="reply_user" @click="reply(com)">回复</span>
          </div>
          <div>
            <p class="user_reviews" :style="'color:'+theme.numberThreeFontColor">{{com.content}}</p>
            <!--              发布评论2-->
            <div style="
    border: 1px solid #f0f0f0;
padding: 1%" v-if="comments_on_falg && showid === com.cid">
              <div>
                <input v-model="middle_name" placeholder="昵称(必填)" class="comment_input"/>
                <input v-model="middle_email" placeholder="邮箱(可不留)" class="comment_input"/>
              </div>
              <div style="margin-top: 1%;
padding-right: 2%;
padding-left: 2%">
          <textarea
            :placeholder="'正在和  '+middle_nickname+' 友好的增进感♂情♂'"
            v-model="middle_content_of_the_review"
            class="comment_input_box">
          </textarea>
              </div>
              <div align="right" style="margin-top: 10px">
                <el-button @click="btn_post1()">发布</el-button>
              </div>
            </div>
            <!--              -->
          </div>
        </div>
        <!--          子评论-->
        <!--        用户的评论展示-->
        <div style="margin-top: 2%;line-height: 20px;margin-left: 5%"
             v-for="com in com.internalReplyList">
          <el-avatar style="float: left;margin-right: 2%">{{com.name}}</el-avatar>
          <div style="overflow: hidden">
            <div><span class="user_s_nickname">{{com.name}}</span></div>
            <div>
              <span class="time">{{com.date}}</span>
              <span class="reply_user" @click="reply(com)">回复</span>
            </div>
            <div>
              <p class="user_reviews"  :style="'color:'+theme.numberThreeFontColor">{{com.content}}</p>
              <!--              发布评论3-->
              <div style="border: 1px solid #f0f0f0;padding: 1%"
                   v-if="comments_on_falg && showid === com.cid">
                <div>
                  <input v-model="middle_name" placeholder="昵称(必填)" class="comment_input"/>
                  <input v-model="middle_email" placeholder="邮箱(可不留)" class="comment_input"/>
                </div>
                <div style="margin-top: 1%;
padding-right: 2%;
padding-left: 2%">
          <textarea
            :placeholder="'正在和  '+middle_nickname+' 友好的增进感♂情♂'"
            v-model="middle_content_of_the_review"
            class="comment_input_box">
          </textarea>
                </div>
                <div align="right" style="margin-top: 10px">
                  <el-button @click="btn_post1()">发布</el-button>
                </div>
              </div>
              <!--              -->
            </div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['comment_list', 'aid'],
    name: 'comment',
    data() {
      return {


        name: '',
        email: '',
        content_of_the_review: '', // 这是用户要提交的评论


        comments_on_falg: false,
        showid: 0,


        middle_nickname: '', // 用于用户之间相互评论

        middle_name: '',
        middle_email: '',
        middle_content: '',
        middle_content_of_the_review: '',

        theme: {},
      };
    },
    create() {

    },

    mounted() {
      const that = this;

      // 初始化系统
      that.theme = that.$store.getters.getTheme;
    },
    methods: {
      btn_post() {
        const that = this;
        if (that.name.length === 0 || that.name.trim() === '') {
          alert('你还没告诉我你叫什么呢~');
        } else {
          const timestamp = new Date().getTime().toString();
          const json = {
            id: that.aid,
            name: that.name,
            email: that.email,
            content: that.content_of_the_review,
            timestamp,
          };
          const sign = that.doSign(json);
          that.$http.post(`${that.COMMENT_API}/post_comment/${sign}`, json).then((res) => {
            console.log(res.data);
            alert(res.data.result);
            that.$router.go(0);
          });
        }
      },
      // 点击回复
      reply(com) {
        this.comments_on_falg = true;
        this.showid = com.cid;
        this.middle_nickname = com.name;
      },
      // 用户之前回复
      btn_post1() {
        const that = this;
        if (that.middle_name.length === 0 || that.middle_name.trim() === '') {
          alert('你还没告诉我你叫什么呢~');
        } else {
          const timestamp = new Date().getTime().toString();
          const json = {
            aid: this.aid,
            cid: this.showid,
            name: that.middle_name,
            email: that.middle_email,
            content: `@${that.middle_nickname} ${that.middle_content_of_the_review}`,
            timestamp,
          };
          const sign = that.doSign(json);
          that.$http.post(`${that.COMMENT_API}/user_comment/${sign}`, json).then((res) => {
            console.log(res.data);
            alert(res.data.result);
            that.$router.go(0);
          });
        }
      },
    },
  };
</script>

<style scoped>

</style>
